<template>
  <view class="comment-modal" v-if="visible" @click="close">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">评论 ({{ comments.length }})</text>
        <text class="close-btn" @click="close">✕</text>
      </view>
      
      <scroll-view class="comment-list" scroll-y>
        <view class="comment-item" v-for="comment in comments" :key="comment.id">
          <image class="comment-avatar" :src="comment.avatar" mode="aspectFill" />
          <view class="comment-content">
            <view class="comment-user">{{ comment.username }}</view>
            <view class="comment-text">{{ comment.content }}</view>
            <view class="comment-actions">
              <text class="comment-time">{{ comment.time }}</text>
              <view class="comment-like" @click="likeComment(comment.id)">
                <text :class="{ liked: comment.isLiked }">👍</text>
                <text class="like-count">{{ comment.likes }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view class="comment-input">
        <input 
          type="text" 
          placeholder="写评论..."
          v-model="newComment"
          @confirm="submitComment"
        />
        <view class="send-btn" @click="submitComment">发送</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

const newComment = ref('')

// 假数据
const comments = ref([
  {
    id: 1,
    username: '学习小白',
    avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=白',
    content: '这个课程讲得太好了，老师很用心！',
    time: '2小时前',
    likes: 15,
    isLiked: false
  },
  {
    id: 2,
    username: '编程爱好者',
    avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=程',
    content: '内容很实用，跟着做完项目收获很大',
    time: '5小时前',
    likes: 8,
    isLiked: true
  },
  {
    id: 3,
    username: '前端新手',
    avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=前',
    content: '老师讲解很详细，适合初学者',
    time: '1天前',
    likes: 23,
    isLiked: false
  }
])

const close = () => {
  emit('close')
}

const likeComment = (commentId) => {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.isLiked = !comment.isLiked
    comment.likes += comment.isLiked ? 1 : -1
  }
}

const submitComment = () => {
  if (!newComment.value.trim()) return
  
  const comment = {
    id: Date.now(),
    username: '我',
    avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=我',
    content: newComment.value,
    time: '刚刚',
    likes: 0,
    isLiked: false
  }
  
  comments.value.unshift(comment)
  newComment.value = ''
  uni.showToast({ title: '评论成功', icon: 'success' })
}
</script>

<style scoped>
.comment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.close-btn {
  font-size: 32rpx;
  color: #999;
  padding: 10rpx;
}
.comment-list {
  flex: 1;
  padding: 0 30rpx;
}
.comment-item {
  display: flex;
  padding: 25rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.comment-content {
  flex: 1;
}
.comment-user {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.comment-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15rpx;
}
.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-time {
  font-size: 22rpx;
  color: #999;
}
.comment-like {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.comment-like text:first-child {
  font-size: 24rpx;
}
.liked {
  color: #ff6b35;
}
.like-count {
  font-size: 22rpx;
  color: #999;
}
.comment-input {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}
.comment-input input {
  flex: 1;
  background: #f5f5f5;
  padding: 20rpx;
  border-radius: 25rpx;
  border: none;
  outline: none;
  font-size: 26rpx;
  margin-right: 20rpx;
}
.send-btn {
  background: #ff6b35;
  color: #fff;
  padding: 18rpx 30rpx;
  border-radius: 25rpx;
  font-size: 26rpx;
}
</style>
